<template>
  <view class="songDetailContainer">
    <view class="author">{{ song.ar[0].name }}</view>
    <view class="circle"></view>
    <image :class="['needle', { needleRotate: isPlay === true }]" src="/static/images/song/needle.png"></image>

    <view :class="['discContainer', { discAnimation: isPlay === true, pause: !isPlay === true }]">
      <image class="disc" src="/static/images/song/disc.png"></image>
      <image class="musicImg" :src="song.al.picUrl"></image>
    </view>

    <!-- 进度条控制区域 -->
    <view class="progressControl">
      <text>{{ currentTime }}</text>
      <!-- 总进度条 -->
      <view class="barControl">
        <!-- 实时进度条 -->
        <view class="audio-currentTime-Bar" :style="{ width: `${currentWidth}rpx` }">
          <!-- 小圆球 -->
          <view class="audio-circle"></view>
        </view>
      </view>
      <text>{{ durationTime }}</text>
    </view>
    <!-- 底部控制播放区域 -->
    <view class="musicControl">
      <text class="iconfont icon-iconsMusicyemianbofangmoshiShuffle"></text>

      <text class="iconfont icon-shangyishou" @click="handleSwitch('pre')"></text>

      <!-- <text :class="['iconfont',{icon-zanting:isPlay === true},'big']" v-if="isPlay"></text> -->
      <text class="iconfont icon-zanting big" v-if="isPlay" @click="handleMusicPlay"></text>
      <text class="iconfont icon-bofang big" v-else @click="handleMusicPlay"></text>

      <text class="iconfont icon-next" @click="handleSwitch('next')"></text>

      <text class="iconfont icon-iconsMusicyemianbofangmoshiPlayList"></text>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';
// 时间格式的包
import dayjs from 'dayjs';
// 获取全局app实例
const app = getApp();
export default {
  data() {
    return {
      // 歌曲播放标识
      isPlay: false,
      // 歌曲信息
      song: {},
      // 歌曲播放地址
      songUrl: '',
      // 实时时间
      currentTime: '00:00',
      // 总时长
      durationTime: '00:00',
      // 红色进度条宽度
      currentWidth: 0
    };
  },
  methods: {
    // 按钮播放、暂停事件
    handleMusicPlay() {
      this.isPlay = !this.isPlay;
      this.musicControl();
    },
    // 播放、暂停歌曲的功能函数
    musicControl(value) {
      if (this.isPlay || value) {
        setTimeout(() => {
          // 播放操作
          this.bgAudioManager.src = this.songUrl;
          this.bgAudioManager.title = this.song.name;
        }, 1000);
      } else {
        this.bgAudioManager.pause();
      }
    },
    // 请求歌曲详情事件
    async getMusicInfo(musicId) {
      const res = await request('/song/detail', { ids: musicId });
      this.durationTime = dayjs(res.songs[0].dt).format('mm:ss');
      this.song = res.songs[0];
      // 修改标题
      uni.setNavigationBarTitle({
        title: `${this.song.name}`
      });
    },
    // 请求歌曲播放地址
    async getMusicUrl(musicId) {
      const res = await request('/song/url', { id: musicId });
      this.songUrl = res.data[0].url;
    },
    // 修改播放状态功能函数
    changePlayState(isPlay) {
      // 存歌曲播放状态
      app.globalData.isMusicPlay = isPlay;
      this.isPlay = isPlay;
    },
    // 切换歌曲的事件
    handleSwitch(val) {
      // 先关上一首歌
      this.bgAudioManager.stop();
      // 接收回传的上下首歌曲ID
      uni.$once('musicId', musicId => {
        // 请求上、下首歌信息
        this.getMusicInfo(musicId);
        this.getMusicUrl(musicId);
        // 自动播放
        this.musicControl(true);
      });
      // 传切换上一首或者下一首标识
      uni.$emit('switchType', val);
    }
  },
  onLoad(options) {
    // 请求歌曲数据
    this.getMusicInfo(options.musicId);
    // 请求歌曲播放地址
    this.getMusicUrl(options.musicId);
    // 获取播放器实例对象
    this.bgAudioManager = uni.getBackgroundAudioManager();
    // 判断歌曲播放状态
    if (app.globalData.isMusicPlay && app.globalData.musicId === options.musicId) {
      this.isPlay = true;
    } else {
      app.globalData.musicId = '';
      app.globalData.isMusicPlay = false;
      this.bgAudioManager.stop();
    }

    // 歌曲播放回调
    this.bgAudioManager.onPlay(() => {
      // 存歌曲ID，方便播放歌曲途中切出后歌曲正常播放的操作
      app.globalData.musicId = options.musicId;
      this.changePlayState(true);
    });
    // 歌曲暂停回调
    this.bgAudioManager.onPause(() => {
      this.changePlayState(false);
    });
    // 歌曲结束回调
    this.bgAudioManager.onStop(() => {
      this.changePlayState(false);
    });
    // 实时监听歌曲播放的事件
    this.bgAudioManager.onTimeUpdate(() => {
      // 实时获取当前播放的时间
      this.currentTime = dayjs(this.bgAudioManager.currentTime * 1000).format('mm:ss');
      // 实时计算红色进度条宽度
      this.currentWidth = (450 / this.bgAudioManager.duration) * this.bgAudioManager.currentTime;
    });
    // 监听歌曲播放结束时事件
    this.bgAudioManager.onEnded(() => {
      // 传切换下一首的标识
      uni.$emit('switchType', val);
      // 重置歌曲进度
      this.currentTime = 0;
      this.currentWidth = 0;
    });
  }
};
</script>

<style lang="scss">
@import '/static/icon-font/icon-font.css';
page {
  height: 100%;
}

.songDetailContainer {
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 底座 */
.circle {
  position: relative;
  z-index: 100;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #fff;
  margin: 10rpx 0;
}
/* 摇杆 */
.needle {
  position: relative;
  z-index: 99;
  top: -40rpx;
  left: 60rpx;
  width: 192rpx;
  height: 274rpx;
  transform-origin: 40rpx 0;
  transform: rotate(-20deg);
  transition: transform 1s;
}

.needleRotate {
  transform: rotate(0deg);
}

/* 磁盘 */
.discContainer {
  position: relative;
  top: -170rpx;
  width: 598rpx;
  height: 598rpx;
}

.discAnimation {
  animation: disc 16s linear infinite 1s;
}
.pause {
  animation: disc 16s linear infinite 1s;
  animation-play-state: paused;
}
/*
  @keyframes: 设置动画帧
    1) from to
      - 使用于简单的动画，只有起始帧和结束帧
      - 北京 - 上海  直达
    2) 百分比
      - 多用于复杂的动画，动画不止两帧
      - 北京 - 上海 ---> 北京 -- 天津 --- 深圳 --- 上海
      - 0% - 100%, 可以任意拆分

*/

@keyframes disc {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.disc {
  width: 598rpx;
  height: 598rpx;
}

.musicImg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 370rpx;
  height: 370rpx;
  border-radius: 50%;
}

/* 底部控制区域 */
.musicControl {
  position: absolute;
  bottom: 40rpx;
  left: 0;
  border-top: 1rpx solid #fff;
  width: 100%;
  display: flex;
}

.musicControl text {
  width: 20%;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  color: #fff;
  font-size: 50rpx;
}

.musicControl text.big {
  font-size: 80rpx;
}

/* 进度条控制区域 */
.progressControl {
  position: absolute;
  bottom: 200rpx;
  width: 640rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
}

.barControl {
  position: relative;
  width: 450rpx;
  height: 4rpx;
  background: rgba(0, 0, 0, 0.4);
  margin: auto;
}

.audio-currentTime-Bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 4rpx;
  background: red;
}

/* 小圆球 */
.audio-circle {
  position: absolute;
  right: -12rpx;
  top: -4rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #fff;
}
</style>
